/*
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-26 11:12:45
 * @LastEditors: monet hanxu@huaun.com
 * @LastEditTime: 2023-09-27 18:54:01
 * @FilePath: /h-radar-expose/plugins/antvG6/customNodes/bgGradientsNode.js
 * @Description:
 *  1.shapeType 为节点的具体形状
 *  节点要求
 *    1. size必须为数组形式
 */
import gradientsConfig from '../gradientsConfig' // 自定义背景类型的数据
const shapeTypeList = ['circle', 'rect'] // 目前支持展示的节点形状

export default (G6) => {
  // 注册自定义节点类型，只改写draw
  G6.registerNode(
    'bg-gradients-node',
    {
      gradients: {},
      drawShape: function drawShape(cfg, group) {
        const {
          shapeType,
          gradient,
          icon = {},
        } = this.mergeStyle || this.getOptions(cfg)

        this.gradients = gradientsConfig[gradient]

        if (!this.gradients) {
          console.error(`Invalid gradient: ${gradient}`)
          return group
        }

        if (!shapeTypeList.includes(shapeType)) {
          console.error(`Invalid shapeType: ${shapeType}`)
          return group
        }

        const style = this.getShapeStyle(cfg)
        const name = ''.concat(this.type, `-${shapeType}`)

        // 绘图
        const keyShape = group.addShape(shapeType, {
          attrs: style,
          className: name,
          name,
          draggable: true,
        })

        group.shapeMap[name] = keyShape

        const { show, text, width, height } = icon
        // 创建图标元素
        if (show) {
          const iconName = ''.concat(this.type, '-icon')
          const base = {
            className: iconName,
            name: iconName,
            draggable: true,
          }

          if (text) {
            group.shapeMap[iconName] = group.addShape('text', {
              attrs: {
                x: 0,
                y: 0,
                fontFamily: 'raderfont',
                fontSize: 12,
                fill: '#fff',
                stroke: '#fff',
                textBaseline: 'middle',
                textAlign: 'center',
                ...this.gradients.icon,
                ...icon,
              },
              ...base,
            })
          } else {
            group.shapeMap[iconName] = group.addShape('image', {
              attrs: {
                x: -width / 2,
                y: -height / 2,
                ...this.gradients.icon,
                ...icon,
              },
              ...base,
            })
          }
        }

        return keyShape
      },
      getShapeStyle: function getShapeStyle(cfg) {
        const { style } = this.mergeStyle || this.getOptions(cfg)
        const size = this.getSize(this.gradients) || this.getSize(cfg)

        return {
          x: 0,
          y: 0,
          r: size[0] / 2,
          width: size[0],
          height: size[1],
          ...this.gradients.style,
          ...style,
        }
      },
      drawLabel: function drawLabel(cfg, group) {
        cfg = {
          ...cfg,
          labelCfg: {
            ...cfg.labelCfg,
            ...this.gradients.labelCfg,
          },
        }

        return G6.Shape.Node['single-node'].drawLabel(cfg, group)
      },
    },
    'single-node'
  )
}
